<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<canvas id="canvas" width="800" height="600"></canvas>

<body>

</body>
<script type="module">
    import { createRenderer, render, h } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js'
    // >======基本用法====>
    // 创建简单元素
    // const vnode = h('div', 'Hello World');


    // 创建带属性的元素
    // const vnode = h('button', {
    //     class: 'btn',
    //     onClick: () => console.log('Clicked!')
    // }, 'Submit');

    // 创建嵌套结构
    // const vnode = h('div', [
    //     h('h1', 'Main Title'),
    //     h('p', 'Content paragraph')
    // ]);





    // 1. 仅标签类型
    // const vnode = h('div')

    // // 2. 标签 + 属性/子元素
    // const vnode = h('div', { id: 'app' })
    // const vnode = h('div', 'Hello')

    // // 3. 标签 + 属性 + 子元素
    // const vnode = h('div', { class: 'container' }, [
    //     h('span', 'Item 1'),
    //     h('span', 'Item 2')
    // ])

    // render(vnode, document.body)



    // const consoleRenderer = createRenderer({
    //     // 创建元素 (tag：标签名)
    //     createElement(tag) {
    //         console.log('createElement', tag);
    //         return { tag };
    //     },
    //     //  插入元素 (child：子元素) (parent：父元素)
    //     insert(child, parent) {
    //         console.log('insert', child, parent);

    //         console.log(`添加 ${child.tag} 到 ${parent.tag}`);
    //     },
    //     //  设置元素文本 (el：元素) (text：文本)
    //     setElementText(el, text) {
    //         console.log('setElementText', el, text);
    //         console.log(`设置 ${el.tag} 文本: "${text}"`);
    //         el.text = text;
    //     }
    // });

    // const vnode = h('div', {}, [h('p', {}, 'Hello Console!')]);
    // consoleRenderer.render(vnode, { tag: 'root' });




    const canvasElement = document.getElementById('canvas');
    const ctx = canvasElement.getContext('2d');

    const canvasRenderer = createRenderer({
        createElement(type) {
            return { type };
        },

        patchProp(el, key, prev, next) {
            el[key] = next;
        },

        insert(child, parent) {
            if (child.type === 'circle') {
                draw(child);
            }
        },


    });

    function draw(element) {
        const [x, y] = element.position || [0, 0];
        const radius = element.radius || 10;
        const color = element.color || 'black';

        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fillStyle = color;
        ctx.fill();
    }

    // 创建Canvas场景
    const scene = h('canvas', {}, [
        h('circle', { position: [100, 100], radius: 50, color: 'blue' }),
        h('circle', { position: [200, 150], radius: 30, color: 'red' })
    ]);

    canvasRenderer.render(scene, canvasElement);;

    // let count = 0;

    // function update() {
    //     // 创建新VNode
    //     const vnode = h('div', [
    //         h('h1', `Count: ${count}`),
    //         h('button', {
    //             onClick: () => {
    //                 count++;
    //                 update(); // 更新视图
    //             }
    //         }, 'Increment')
    //     ]);

    //     // 渲染更新
    //     render(vnode, document.body)
    // }

    // // 初始渲染
    // update();

</script>


</html>